<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>圆锥渐变</title>
    </head>
    <body>
        <canvas id="c" width="600" height="400" style="border: 1px solid #ccc"></canvas>

        <script>
            const cnv = document.getElementById('c')
            const ctx = cnv.getContext('2d')

            let conicGradient = ctx.createConicGradient(0, 300, 200)
            conicGradient.addColorStop(0, 'red')
            conicGradient.addColorStop(0.5, 'yellow')
            conicGradient.addColorStop(1, 'blue')

            ctx.fillStyle = conicGradient

            ctx.arc(300, 200, 100, 0, (Math.PI / 180) * 360)

            ctx.fill()
        </script>
    </body>
</html>
